import React, { memo, useState, useEffect } from "react";
import { useSelector, useDispatch, shallowEqual } from "react-redux";
import { userCommentEventAction } from "@/pages/user/store/actionTypes";
import { EventWrap } from "./style";
import {
  getSizeImage,
  getMonthDayHouMin,
  getSizeImageSquare,
  getSizeImageXY,
  getCount,
} from "@/utils/format-utils";
import { formalMinuteSeconds } from "@/utils/formatMinuteSecond";
import { getCommentEvent } from "@/services/user";
import UserComment from "@/components/user/userComment";
import Comment from "@/components/aboutComment/comment";
import { getImage } from "@/utils/format-getUrlImage";
import { isEmpty } from "@/utils/isEmpty";
import Pagination from "@/components/pagination";

export default memo(function Event(props) {
  const [state, setstate] = useState(false);
  const [x, setX] = useState();
  const [detail, setDetail] = useState(false);
  const [arrI, setArrI] = useState(0);
  const [pageState, setPageState] = useState(1);

  async function getComment(id) {
    props.getComment();
    setstate(!state);
    setX(await getCommentEvent(id));
  }
  const dispatch = useDispatch();

  useEffect(() => {
    setDetail(props.open);
    dispatch(userCommentEventAction(props.id));
  }, [props.open, dispatch, props.id]);
  const { userCommentEventInfo } = useSelector(
    (state) => ({
      userCommentEventInfo: state.getIn(["userInfo", "commentEventInfo"]),
    }),
    shallowEqual
  );
  const getClose = () => {
    setstate(false);
    setDetail(true);
  };
  const arr = [];

  if (props.open) {
    props.dzimg.forEach((item, index) => {
      if (arrI == 0) {
        getImage(item.s).then((res) => {
          arr.push(res.profile.avatarUrl);
          if (props.dzimg.length == arr.length) {
            setArrI(arr);
          }
        });
      }
    });
  }
  const getPage = (page) => {
    setPageState(page);
  };
  const dataJson = isEmpty(JSON.parse(props.itemValue.json))
    ? []
    : JSON.parse(props.itemValue.json);
  return (
    <EventWrap>
      {/* 分享单曲 */}
      {props.type == 18 ? (
        <React.Fragment>
          <div className="json-song">
            <div className="json-img">
              <img
                src={getSizeImage(dataJson.song.album.blurPicUrl, 40)}
                alt=""
              />
              <a className="json-msk frd_dyn"> </a>
            </div>
            <div className="json-song-text">
              <p className="json-songname">{dataJson.song.name}</p>
              {isEmpty(dataJson.song.artists) ? null : (
                <p className="json-artists">
                  {dataJson.song.artists.map((itemb, indexb) => {
                    return itemb.name;
                  })}
                </p>
              )}
            </div>
          </div>
          <div className="clear">
            {!isEmpty(props.itemValue.pics) ? (
              <div className="json-song-img-box">
                {props.itemValue.pics.map((itemd, indexd) => {
                  return (
                    <div key={itemd.originUrl} className="json-song-div fl">
                      <img
                        src={
                          props.itemValue.pics.length == 1
                            ? itemd.width < itemd.height
                              ? itemd.height > 2000
                                ? getSizeImageXY(itemd.originUrl, 170, 338)
                                : getSizeImageSquare(itemd.originUrl, 0, 338)
                              : getSizeImageSquare(itemd.originUrl, 338, 0)
                            : getSizeImageXY(itemd.originUrl, 110, 110)
                        }
                        alt=""
                      />
                    </div>
                  );
                })}
              </div>
            ) : (
              ""
            )}
          </div>
        </React.Fragment>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 分享节目 */}
      {props.type == 17 ? (
        <React.Fragment>
          <div className="json-song">
            <div className="json-img">
              <img
                src={getSizeImage(dataJson.program.radio.picUrl, 40)}
                alt=""
              />
              <a className="json-msk frd_dyn"> </a>
            </div>
            <div className="json-song-text">
              <p className="json-songname">{dataJson.program.name}</p>
              <span className="json-category">
                {dataJson.program.radio.category}
              </span>
              <span>{dataJson.program.radio.name}</span>
            </div>
          </div>
          <div className="clear">
            {props.itemValue.pics.length !== 0 ? (
              <div className="json-song-img-box">
                {props.itemValue.pics.map((itemd, indexd) => {
                  return (
                    <div key={itemd.originUrl} className="json-song-div fl">
                      <img
                        src={
                          props.itemValue.pics.length == 1
                            ? itemd.width < itemd.height
                              ? itemd.height > 2000
                                ? getSizeImageXY(itemd.originUrl, 170, 338)
                                : getSizeImageSquare(itemd.originUrl, 0, 338)
                              : getSizeImageSquare(itemd.originUrl, 338, 0)
                            : getSizeImageXY(itemd.originUrl, 110, 110)
                        }
                        alt=""
                      />
                    </div>
                  );
                })}
              </div>
            ) : (
              ""
            )}
          </div>
        </React.Fragment>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 分享电台 */}
      {props.type == 28 ? (
        <div className="json-song">
          <div className="json-img">
            <img src={getSizeImage(dataJson.djRadio.picUrl, 40)} alt="" />
          </div>
          <div className="json-song-text">
            <span className="json-category">{dataJson.djRadio.category}</span>
            <span>
              <a style={{ fontSize: "14px" }}>{dataJson.djRadio.name}</a>
            </span>
            <p className="json-songname">
              by{" "}
              <a style={{ fontSize: "12px" }}>{dataJson.djRadio.dj.nickname}</a>
            </p>
          </div>
        </div>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 分享专辑 */}
      {props.type == 19 ? (
        <div className="json-song">
          <div className="json-img">
            <img src={getSizeImage(dataJson.album.picUrl, 40)} alt="" />
            <a className="json-msk frd_dyn"> </a>
          </div>
          <div className="json-song-text">
            <span className="json-category">{dataJson.album.type}</span>
            <span className="json-songname">{dataJson.album.name}</span>
            <p>{dataJson.album.artist.name}</p>
          </div>
        </div>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 分享歌单 */}
      {props.type == 35 && !isEmpty(props.itemValue.pics) ? (
        <div className="json-fdpic">
          {props.itemValue.pics.map((itemc, indexc) => {
            return (
              <div key={itemc.originUrl} className="json-fdpic-box clear">
                <div
                  className={
                    itemc.height > 2000
                      ? "longPic json-img-box curbig"
                      : "json-img-box curbig"
                  }
                >
                  <img
                    className={
                      itemc.width < itemc.height
                        ? "pcRectangleUrl pic-high"
                        : "pcRectangleUrl pic-wide"
                    }
                    src={
                      props.itemValue.pics.length == 1
                        ? itemc.width < itemc.height
                          ? itemc.height > 2000
                            ? getSizeImageXY(itemc.originUrl, 170, 338)
                            : getSizeImageSquare(itemc.originUrl, 0, 338)
                          : getSizeImageSquare(itemc.originUrl, 338, 0)
                        : getSizeImageXY(itemc.originUrl, 110, 110)
                    }
                    alt=""
                  />
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 转发歌单 */}
      {props.type == 13 ? (
        <div className="json-fdpic">
          <div className="json-zfgd">
            <div className="json-img">
              <img
                src={getSizeImageXY(dataJson.playlist.coverImgUrl, 40, 40)}
                alt=""
              />
              <a className="json-msk frd_dyn"> </a>
            </div>
            <div>
              <span className="zfgd-span">
                <span className="red-box">歌单</span>
                <a className="red-box-a">{dataJson.playlist.name}</a>
              </span>
              <span className="zfgd-span">
                by <a>{dataJson.playlist.creator.nickname}</a>
              </span>
            </div>
          </div>
        </div>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 发布视频 */}
      {props.type == 39 ? (
        <div className="json-fdpic">
          {dataJson.video.videoStatus !== -1 ? (
            <div className="json-video-box">
              <img
                src={getSizeImageXY(dataJson.video.coverUrl, 338, 189)}
                alt=""
              />
              <div className="json-video-msk">
                <div className="json-video-title">
                  <div className="json-video-title-box">
                    <span className="json-video-title-name">
                      {dataJson.video.title}
                    </span>
                    <span className="json-video-title-nickname">
                      {" "}
                      -by {dataJson.video.creator.nickname}
                    </span>
                  </div>
                </div>
                <div className="json-video-bottom-box">
                  <span>
                    <i className="video-icon-play frd_dyn"></i>
                    {getCount(dataJson.video.playTime)}
                  </span>
                  <span>
                    <i className="video-icon-sj frd_dyn"></i>
                    {formalMinuteSeconds(dataJson.video.durationms)}
                  </span>
                </div>
                <i className="json-video-play frd_dyn"></i>
              </div>
            </div>
          ) : (
            <div className="empty-detail">该视频被删除</div>
          )}
        </div>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 分享MV */}
      {props.type == 21 ? (
        <div className="json-fdpic">
          <div className="json-video-box">
            <img
              className="f-img"
              src={getSizeImageXY(dataJson.mv.imgurl16v9, 338, 189)}
              alt=""
            />
            <div className="json-video-msk">
              <div className="json-video-title">
                <div className="json-video-title-box">
                  <i className="json-mv-icon frd_dyn"></i>
                  <span className="json-video-title-name">
                    {dataJson.mv.name}
                  </span>
                  {!isEmpty(dataJson.mv.artists) ? (
                    <span className="json-video-title-nickname">
                      {" "}
                      -{" "}
                      {dataJson.mv.artists.map((iteme, indexe) => {
                        return (
                          <React.Fragment key={indexe + Math.random()}>
                            {indexe + 1 == dataJson.mv.artists.length ? (
                              iteme.name
                            ) : (
                              <React.Fragment>
                                {iteme.name} <em>/</em>
                              </React.Fragment>
                            )}
                          </React.Fragment>
                        );
                      })}
                    </span>
                  ) : null}
                </div>
              </div>
              <div className="json-video-bottom-box">
                <span>
                  <i className="video-icon-play frd_dyn"></i>
                  {getCount(dataJson.mv.playCount)}
                </span>
              </div>
              <i className="json-video-play"></i>
            </div>
          </div>
        </div>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 分享歌手 */}
      {props.type == 36 ? (
        <React.Fragment>
          <div className="json-song">
            <div className="json-img">
              <a>
                <img src={getSizeImage(dataJson.resource.picUrl, 40)} alt="" />
              </a>
            </div>
            <div className="json-song-text">
              <p className="artist-name">
                歌手： <a>{dataJson.resource.name}</a>
              </p>
            </div>
          </div>
          <div className="clear">
            {!isEmpty(props.itemValue.pics) ? (
              <div className="json-song-img-box">
                {props.itemValue.pics.map((itemd, indexd) => {
                  return (
                    <div key={itemd.originUrl} className="json-song-div fl">
                      <img
                        src={
                          props.itemValue.pics.length == 1
                            ? itemd.width < itemd.height
                              ? itemd.height > 2000
                                ? getSizeImageXY(itemd.originUrl, 170, 338)
                                : getSizeImageSquare(itemd.originUrl, 0, 338)
                              : getSizeImageSquare(itemd.originUrl, 338, 0)
                            : getSizeImageXY(itemd.originUrl, 110, 110)
                        }
                        alt=""
                      />
                    </div>
                  );
                })}
              </div>
            ) : (
              ""
            )}
          </div>
        </React.Fragment>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {props.type == 56 ? (
        <React.Fragment>
          <div className="json-song">
            <div className="json-img">
              <a>
                <img
                  src={getSizeImage(dataJson.resource.coverImgUrl, 40)}
                  alt=""
                />
              </a>
            </div>
            <div className="json-song-text">
              <p className="artist-name">
                <a>{dataJson.resource.title}</a>
              </p>
            </div>
          </div>
        </React.Fragment>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {/* 转发 */}
      {props.type == 22 ? (
        <React.Fragment>
          <div className="json-event">
            <div className="json-event-text">
              <span className="json-text">
                <a className="json-evnet-user-name">
                  @{dataJson.event.user.nickname}
                </a>
                &nbsp;
                {dataJson.event.type == 21
                  ? "分享MV"
                  : dataJson.event.type == 18
                  ? "分享单曲"
                  : dataJson.event.type == 17 && 28
                  ? "分享节目"
                  : dataJson.event.type == 19
                  ? "分享专辑"
                  : dataJson.event.type == 39
                  ? "发布视频 "
                  : dataJson.event.type == 22
                  ? "转发"
                  : dataJson.event.type == 36
                  ? "分享歌手"
                  : ""}
                {JSON.parse(dataJson.event.json).msg}
              </span>
              <div className="json-zf-box">
                <Event type={dataJson.event.type} itemValue={dataJson.event} />
              </div>
            </div>
          </div>
        </React.Fragment>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      <div className="user-j-flag">
        <a>
          <i className="j-dz"></i>({props.itemValue.info.likedCount})<em>|</em>
        </a>
        <a>
          转发({props.itemValue.info.shareCount})<em>|</em>
        </a>
        <a onClick={(e) => getComment(props.id)}>
          评论({props.itemValue.info.commentCount})
        </a>
      </div>
      {detail ? (
        <React.Fragment>
          <div className="user-img-box">
            赞：
            {!isEmpty(arrI)
              ? arrI.map((item, index) => {
                  return (
                    <a className="user-imga">
                      <img src={getSizeImage(item, 30)} alt="" />
                    </a>
                  );
                })
              : ""}
          </div>
        </React.Fragment>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {!detail ? (
        <React.Fragment>
          {state ? (
            <div className="user-comment-box">
              {x ? (
                <UserComment
                  index={props.indexNum}
                  commentId={props.itemValue.id}
                  userId={props.userId}
                  getClose={getClose}
                  pageNum={1}
                  comments={x}
                />
              ) : (
                ""
              )}
            </div>
          ) : (
            <React.Fragment></React.Fragment>
          )}
        </React.Fragment>
      ) : (
        <React.Fragment></React.Fragment>
      )}
      {detail ? (
        <div className="user-comment-box">
          {userCommentEventInfo.code == 200 ? (
            <Comment
              handCheck={true}
              index={props.indexNum}
              commentId={props.itemValue.id}
              userId={props.userId}
              getClose={getClose}
              pageNum={pageState}
              comments={userCommentEventInfo}
            />
          ) : (
            ""
          )}
          {userCommentEventInfo.total / 20 < 1 ? (
            ""
          ) : (
            <Pagination
              size={20}
              page={pageState}
              getPage={getPage}
              total={userCommentEventInfo.total}
            />
          )}
        </div>
      ) : (
        <React.Fragment></React.Fragment>
      )}
    </EventWrap>
  );
});
